<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    /* Slides need to be absolutely positioned within the wrapper.
This has a tiny bit of extra pizazz: */
    #slideshow {
        margin: 50px auto;
        position: relative;
        width: 240px;
        height: 240px;
        padding: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }
    #slideshow > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
</style>
<div id="slideshow">
    <div>
        <img src="http://www.yanta.gov.cn/web_files/picture/2021/10/18/202110181142228317007.jpg?x-oss-process=image/resize,w_626">
    </div>
    <div>
        <img src="http://www.yanta.gov.cn/web_files/picture/2021/10/15/202110150945575191368.jpg?x-oss-process=image/resize,w_626">
    </div>
    <div>
        Pretty cool eh? This slide is proof the content can be anything.
    </div>
</div>
<script src="js/jquery.js"></script>
<script>
    //Run after DOM is ready.
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
    }, 3000);
</script>
</body>
</html>